<template>
      <div class="header">
           <div class="header-left">
             <span class="iconfont icon-zuojiantou"></span>
           </div>
           <div class="header-input">
              <span class="iconfont icon-sousuo"></span>
              <input type="text" placeholder="输入城市景点/游玩主题">
           </div>
           <router-link to="/city">
             <div class="header-right">
               {{this.$store.state.city}}
               <span class="iconfont icon-xiajiantou"></span>
             </div>
           </router-link>
      </div>
</template>

<script>
    export default {
        name: "Header",
        props:{// 接受参数
            city:String
        }
    }
</script>
<style lang="stylus" scoped>
   .header
     width: 100%
     height:.45rem;
     background :#00bcd4
     display:flex;
     align-items :center;
     color:#fff;
     font-size:.14rem;
     .header-left
      margin:0 .06rem;
     .header-input
        flex:1
        height:.3rem;
        background :#fff;
        border-radius:.03rem;
        color:#cacaca;
        line-height :.26rem;
        span{
          display inline-block
          margin-left :5px;
          font-size:.18rem;
          vertical-align middle
        }

     .header-right
       color:#ffffff;
       margin:0 .06rem;
</style>
